<template>
  <div id="banxin" @click="fun()">
      <div id="banxin-1">
      <ul>
        <li>
          推荐
          <p></p>
        </li>
        <li>普洱茶</li>
        <li>红茶</li>
        <li>绿茶</li>
        <li>乌龙茶</li>
        <li>黑茶</li>
        <li>白茶</li>
        <li>花草茶</li>
        <li>茶具</li>
        <li>茶书</li>
        <li>茶膏</li>
      </ul>
    </div>
    <!-- 轮播图 -->
    <div id="lb">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="ia_100000076.jpg" /></van-swipe-item>
        <van-swipe-item><img src="ia_100000077.jpg" /></van-swipe-item>
        <van-swipe-item><img src="ia_100000078.jpg" /></van-swipe-item>
        <van-swipe-item><img src="ia_100000079.jpg" /></van-swipe-item>
        <van-swipe-item><img src="ia_100000080.jpg" /></van-swipe-item>
        <van-swipe-item><img src="ia_100000081.jpg" /></van-swipe-item>
      </van-swipe>
    </div>
    <div id="shouhou">
      <ul>
        <li>
          <span>
            <img src="ia_100000082.png" />
          </span>
          <span>正品保障</span>
        </li>
        <li>
          <span>
            <img src="ia_100000083.png" />
          </span>
          <span>售后保障</span>
        </li>
        <li>
          <span>
            <img src="ia_100000084.png" />
          </span>
          <span>到货付款</span>
        </li>
        <li>
          <span>
            <img src="ia_100000085.png" />
          </span>
          <span>满99包邮</span>
        </li>
      </ul>
    </div>
    <!-- 最新上架 -->
    <div id="zuixin">
      <ul>
        <li>
          <div>
            <img src="ia_100000086.png" />
          </div>
          <p>最新上架</p>
        </li>
        <li>
          <div>
            <img src="ia_100000087.png" />
          </div>
          <p>热销推荐</p>
        </li>
        <li>
          <div>
            <img src="ia_100000088.png" />
          </div>
          <p>手机专享</p>
        </li>
        <li>
          <div>
            <img src="ia_100000089.png" />
          </div>
          <p>限时秒杀</p>
        </li>
        <li>
          <div>
            <img src="ia_100000090.png" />
          </div>
          <p>套餐优惠</p>
        </li>
        <li>
          <div>
            <img src="ia_100000091.png" />
          </div>
          <p>茶具</p>
        </li>
        <li>
          <div>
            <img src="ia_100000092.png" />
          </div>
          <p>精选品牌</p>
        </li>
      </ul>
    </div>
    <!-- 头条 -->
    <div id="tt">
      <div id="tt-1">
        <div id="tt-2">
          <img src="ia_100000093.png" />
        </div>
        <p>大雪山，九年坚守。品质口碑，始冬</p>
        <p>></p>
      </div>
    </div>
    <!-- 热销品牌 -->
    <div id="rx">
      <div id="rx-1">
        <div id="rx-t">
          <span>热销品牌</span>
          <span>更多></span>
        </div>
        <div id="rx-b">
          <ul>
            <li>
              <div>
                <img src="ia_100000094.png" />
              </div>
              <p>中茶</p>
            </li>
            <li>
              <div>
                <img src="ia_100000095.png" />
              </div>
              <p>大益</p>
            </li>
            <li>
              <div>
                <img src="ia_100000096.png" />
              </div>
              <p>下关沱茶</p>
            </li>
            <li>
              <div>
                <img src="ia_100000097.png" />
              </div>
              <p>八角亭</p>
            </li>
            <li>
              <div>
                <img src="ia_100000098.png" />
              </div>
              <p>七彩云南</p>
            </li>
            <li>
              <div>
                <img src="ia_100000099.png" />
              </div>
              <p>六大茶山</p>
            </li>
            <li>
              <div>
                <img src="ia_100000100.png" />
              </div>
              <p>润元昌</p>
            </li>
            <li>
              <div>
                <img src="ia_100000101.png" />
              </div>
              <p>老同志</p>
            </li>
            <li>
              <div>
                <img src="ia_100000102.png" />
              </div>
              <p>陈升号</p>
            </li>
            <li>
              <div>
                <img src="ia_100000103.png" />
              </div>
              <p>郎河</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 手机专享 -->
    <div id="zx">
      <div id="zx-1">
        <div id="zx-1-t">
          <span>手机专享</span>
          <span>更多></span>
        </div>
        <div id="zx-1-b">
          <ul>
            <li>
              <div>
                <img src="ia_100000105.jpg" />
              </div>
              <p>￥118.00</p>
              <p>专享价</p>
              <p>￥108.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000106.jpg" />
              </div>
              <p>￥120.00</p>
              <p>专享价</p>
              <p>￥88.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000107.jpg" />
              </div>
              <p>￥35.00</p>
              <p>专享价</p>
              <p>￥30.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000108.jpg" />
              </div>
              <p>￥1580.00</p>
              <p>专享价</p>
              <p>￥888.00</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 限时秒杀 -->
    <div id="xs">
      <div id="xs-1">
        <div id="xs-1-t">
          <span>限时秒杀</span>
          <span>更多></span>
        </div>
        <div id="xs-1-b">
          <ul>
            <li>
              <div>
                <img src="ia_100000001230.jpg" />
              </div>
              <p>￥88.00</p>
              <p>￥68.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000109.jpg" />
              </div>
              <p>￥99.00</p>
              <p>￥25.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000112.jpg" />
              </div>
              <p>￥750.00</p>
              <p>￥300.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000001230.jpg" />
              </div>
              <p>￥680.00</p>
              <p>￥168.00</p>
            </li>
            <li>
              <div>
                <img src="ia_100000001230.jpg" />
              </div>
              <p>￥1200.00</p>
              <p>￥235.00</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  methods:{
        fun(){
            // 编程式导航   
            this.$router.push("/liebiao")
        }
    }
};
</script>

<style scoped>
div {
  font-size: 0;
}
#banxin {
  width: 100%;
  background-color: gainsboro;
}
#banxin-1 {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  background-color: rgb(229, 38, 82);
  margin-top: 0.44rem;
}
#banxin-1 ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;

}
#banxin-1 ul li {
  font-size: 0.16rem;
  color: white;
  flex-shrink: 0;
  margin: 0 .2rem;

}
#banxin-1 ul li p {
  width: 0.2rem;
  border: 0.02rem solid white;
  margin-top: -0.08rem;
}
/* 轮播图 */
#lb {
  width: 100%;
  padding: 0.1rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  /* font-size: 20px;
  line-height: 150px; */
  text-align: center;
  background-color: gainsboro;
}
.my-swipe .van-swipe-item img {
  width: 3.55rem;
  height: 1.78rem;
}
#shouhou {
  width: 100%;
  padding: 0 0.18rem;
}
#shouhou ul {
  display: flex;
  justify-content: space-between;
}
#shouhou ul li {
  font-size: 0.11rem;
}
#shouhou ul li img {
  width: 0.11rem;
  height: 0.11rem;
  margin-top: 0.025rem;
}
#shouhou ul li span:nth-of-type(2) {
  margin-left: 0.05rem;
}
/* 最新上架 */
#zuixin {
  padding: 12px 4px 0px;
  width: 100%;
}
#zuixin ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
}
#zuixin ul li {
  width: 20%;
  text-align: center;
  flex-shrink: 0;
}
#zuixin ul li div {
  width: 0.45rem;
  height: 0.45rem;
  display: flex;
  margin: auto;
}
#zuixin ul li img {
  width: 100%;
  height: 100%;
}
#zuixin ul li p {
  font-size: 0.12rem;
  margin-top: 0.1rem;
}
/* 头条 */
#tt {
  width: 100%;
  padding: 0.1rem 0.1rem;
  margin-top: 0.1rem;
}
#tt-1 {
  height: 0.4rem;
  padding: 0.1rem 0.1rem;
  background-color: white;
  border-radius: 0.1rem;
  display: flex;
  justify-content: space-between;
}
#tt-2 {
  width: 0.59rem;
  height: 0.15rem;
}
#tt-2 img {
  width: 0.59rem;
  height: 0.15rem;
}
#tt-1 p {
  font-size: 0.14rem;
}
/* 热销品牌 */
#rx {
  width: 100%;
  padding: 0.1rem 0.1rem;
  margin-top: 0.2rem;
  background-color: gainsboro;
}
#rx-1 {
  background-color: white;
}
#rx-t {
  width: 100%;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
}
#rx-b {
  margin-top: 0.2rem;
  width: 100%;
}
#rx-b ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-between;
}
#rx-b ul li {
  width: 20%;
  text-align: center;
  padding: 0.08rem 0;
}
#rx-b ul li div {
  width: 0.69rem;
  height: 0.34rem;
}
#rx-b ul li div img {
  width: 0.69rem;
  height: 0.34rem;
}
#rx-b ul li p {
  font-size: 0.14rem;
  margin-top: 0.1rem;
}
/* 手机专享 */
#zx {
  width: 100%;
  padding: 0.1rem;
}
#zx-1 {
  background-color: rgb(229, 38, 82);
  border-radius: 0.05rem;
}
#zx-1-t {
  width: 100%;
  padding: 0.1rem 0.1rem;
  font-size: 0.14rem;
  line-height: 0.27rem;
  display: flex;
  justify-content: space-between;
  color: white;
}
#zx-1-t span:nth-of-type(1) {
  font-size: 0.16rem;
}
#zx-1-b {
  width: 100%;
}
#zx-1-b ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
#zx-1-b ul li {
  width: 23%;
  background-color: white;
  border-radius: 0.05rem;
  margin: 0.05rem 0;
  text-align: center;
}
#zx-1-b ul li div {
  height: 0.76rem;
}
#zx-1-b ul li div img {
  width: 100%;
  height: 100%;
}
#zx-1-b ul li p:nth-of-type(1) {
  font-size: 0.12rem;
  color: gray;
  text-decoration: line-through;
  margin-top: 0.1rem;
}
#zx-1-b ul li p:nth-of-type(2) {
  font-size: 0.14rem;
  margin-top: 0.1rem;
}
#zx-1-b ul li p:nth-of-type(3) {
  font-size: 0.14rem;
  margin: 0.1rem 0;
  color: red;
}
/* 限时秒杀 */
#xs {
  width: 100%;
  padding: 0.1rem;
  margin: 0.2rem 0;
}
#xs-1 {
  background-color: #fff;
  border-radius: 0.05rem;
}
#xs-1-t {
  width: 100%;
  padding: 0.1rem 0.1rem;
  font-size: 0.16rem;
  line-height: 0.27rem;
  display: flex;
  justify-content: space-between;
}
#xs-1-t span:nth-of-type(2) {
  font-size: 0.14rem;
}
#xs-1-b {
  width: 100%;
  margin-top: 0.1rem;
}
#xs-1-b ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#xs-1-b ul li {
  width: 20%;
  padding: 0 0.05rem;
  margin: .1rem 0;
  text-align: center;
}
#xs-1-b ul li div {
  width: 0.59rem;
  height: 0.59rem;
}
#xs-1-b ul li div img {
  width: 100%;
  height: 100%;
}
#xs-1-b ul li p:nth-of-type(1){
  font-size: .12rem;
  text-decoration: line-through;
  color: gray;
}
#xs-1-b ul li p:nth-of-type(2){
  font-size: .14rem;
  color: red;
}
</style>